<div ng-controller="ConfigurationController" class="configuration-tab">
  <tabset class="tabs-top">

    <tab active="generalConfigActive" select="onTabSelect({name: 'generalConfig'})">
      <tab-heading class="fs-unmask">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, '')"></i>
        <span translate="home.detailPane.configurationTab.general">General</span>
      </tab-heading>

      <div ng-if="generalConfigActive" class="tabs-content">
        <ng-include src="'app/home/detail/configuration/general.tpl.html'"></ng-include>
      </div>
    </tab>

    <tab ng-repeat="groupNameToLabelMap in configGroupTabs"
         ng-if="isStageGroupVisible(detailPaneConfigDefn, detailPaneServices, detailPaneConfig.uiInfo.displayMode, groupNameToLabelMap.name)"
         disable="!isStageGroupEnabled(detailPaneConfig, detailPaneConfigDefn, detailPaneServices, groupNameToLabelMap.name)"
         active="groupNameToLabelMap.active"
         select="onTabSelect(groupNameToLabelMap)">
      <tab-heading class="fs-unmask">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, groupNameToLabelMap.name)"></i>
        <span>{{groupNameToLabelMap.label}}</span>
      </tab-heading>

      <div class="tabs-content" ng-if="groupNameToLabelMap.active">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="{{selectedType === pipelineConstant.STAGE_INSTANCE ? 'd' + detailPaneConfig.instanceName : 'pipeline'}}">
          <div class="form-group "
               ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
               ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: groupNameToLabelMap.name, displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
               ng-if="(verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === groupNameToLabelMap.name && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
               ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                    src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>
          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | filter: {group: groupNameToLabelMap.name, displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition)) && configDefinition.group === groupNameToLabelMap.name  && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">

              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                      src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
          <div class="show-advanced-button fs-unmask form-group">
            <div class="tooltip-wrapper col-lg-3 col-md-4"
                ng-class="{'disabled': configHasAdvancedIssues}"
                tooltip="{{configHasAdvancedIssues ? ('home.detailPane.advancedIssuesNeedFix' | translate) : ''}}"
                tooltip-append-to-body="true"
                tooltip-placement="right">
              <button class="btn btn-link dropdown-toggle" type="button"
              ng-click="toggleConfigDisplayMode()"
              ng-if="groupHasEnabledAdvancedConfig(detailPaneConfig, detailPaneConfigDefn.configDefinitions, detailPaneServices, groupNameToLabelMap.name)"
              ng-disabled="configHasAdvancedIssues"
              >
                <div ng-switch="detailPaneConfig.uiInfo.displayMode">
                  <div ng-switch-when="ADVANCED">
                    Hide Advanced Options
                    <i class="glyphicon glyphicon-menu-up"></i>
                  </div>
                  <div ng-switch-default>
                    Show Advanced Options
                    <i class="glyphicon glyphicon-menu-down"></i>
                  </div>
                </div>
              </button>
            </div>
          </div>

          <div class="form-group "
          ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
          ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: groupNameToLabelMap.name, displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
          ng-if="(verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === groupNameToLabelMap.name && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
          ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

       <ng-include ng-if="selectedType !== pipelineConstant.LINK"
               src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
     </div>
     <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
       <div class="form-group "
            ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
            ng-repeat="configDefinition in service.definition.configDefinitions | filter: {group: groupNameToLabelMap.name, displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
            ng-if="(verifyDependsOnMap(service.config, configDefinition)) && configDefinition.group === groupNameToLabelMap.name  && isShownByConfigDisplayMode(configDefinition.displayMode, detailPaneConfig.uiInfo.displayMode)"
            ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">

         <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                 src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
       </div>
     </div>
        </form>
      </div>
    </tab>

    <tab ng-if="testOriginStageConfig"
         select="onTabSelect({name: 'testOriginStageConfig'})"
         active="testOriginStageConfigActive">
      <tab-heading class="fs-unmask" ng-controller="TestOriginConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.testOrigin' | translate}}
      </tab-heading>
      <div class="tabs-content" ng-if="testOriginStageConfigActive" ng-controller="TestOriginConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">
          <div class="form-group"
               ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
               ng-repeat="configDefinition in testOriginStageConfigDefn.configDefinitions | filter: {displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
               ng-if="(verifyDependsOnMap(testOriginStageConfig, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
               ng-init="configIndex = getConfigIndex(testOriginStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | filter: {displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>

          <div class="show-advanced-button fs-unmask form-group">
            <div class="tooltip-wrapper col-lg-3 col-md-4"
                ng-class="{'disabled': configHasAdvancedIssues}"
                tooltip="{{configHasAdvancedIssues ? ('home.detailPane.advancedIssuesNeedFix' | translate) : ''}}"
                tooltip-append-to-body="true"
                tooltip-placement="right">
              <button class="btn btn-link dropdown-toggle" type="button"
                  ng-click="toggleConfigDisplayMode()"
                  ng-if="hasAdvancedConfig(detailPaneConfigDefn.configDefinitions, detailPaneServices)"
                  ng-disabled="configHasAdvancedIssues">
                <div ng-switch="pipelinePaneConfig.uiInfo.displayMode">
                  <div ng-switch-when="ADVANCED">
                    Hide Advanced Options
                    <i class="glyphicon glyphicon-menu-up"></i>
                  </div>
                  <div ng-switch-default>
                    Show Advanced Options
                    <i class="glyphicon glyphicon-menu-down"></i>
                  </div>
                </div>
              </button>
            </div>
          </div>

          <div class="form-group"
                ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
                ng-repeat="configDefinition in testOriginStageConfigDefn.configDefinitions | filter: {displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
                ng-if="(verifyDependsOnMap(testOriginStageConfig, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                ng-init="configIndex = getConfigIndex(testOriginStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | filter: {displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
        </form>

        <div class="row" ng-if="!testOriginStageConfigDefn">
          <div class="col-md-12" >
            <div class="alert alert-danger" role="alert">
              <i class="fa fa-exclamation-triangle"></i>
              <span translate="home.detailPane.noStageDefinitionFound" translate-values="{stageName: detailPaneConfig.stageName, library: detailPaneConfig.library}"></span>
            </div>
          </div>

          <div class="col-md-12 col-md-offset-1" >
            <button class="btn btn-primary" ng-click="onInstallMissingLibraryClick(detailPaneConfig.library)">Install Missing Stage Library</button>
          </div>

        </div>

      </div>
    </tab>


    <tab ng-if="errorStageConfig"
         select="onTabSelect({name: 'errorStageConfig'})"
         active="errorStageConfigActive">
      <tab-heading ng-controller="ErrorConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.badRecords' | translate}} - {{errorStageConfigDefn.label}}
      </tab-heading>
      <div class="tabs-content" ng-if="errorStageConfigActive" ng-controller="ErrorConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">
          <div class="form-group"
               ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
               ng-repeat="configDefinition in errorStageConfigDefn.configDefinitions | filter: {displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
               ng-if="(verifyDependsOnMap(errorStageConfig, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
               ng-init="configIndex = getConfigIndex(errorStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | filter: {displayMode: '!ADVANCED'} | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>

          <div class="show-advanced-button fs-unmask form-group">
            <div class="tooltip-wrapper col-lg-3 col-md-4"
                ng-class="{'disabled': configHasAdvancedIssues}"
                tooltip="{{configHasAdvancedIssues ? ('home.detailPane.advancedIssuesNeedFix' | translate) : ''}}"
                tooltip-append-to-body="true"
                tooltip-placement="right">
              <button class="btn btn-link dropdown-toggle" type="button"
                  ng-click="toggleConfigDisplayMode()"
                  ng-if="hasAdvancedConfig(errorStageConfigDefn.configDefinitions, detailPaneServices)"
            ng-disabled="configHasAdvancedIssues">
                <div ng-switch="pipelinePaneConfig.uiInfo.displayMode">
                  <div ng-switch-when="ADVANCED">
                    Hide Advanced Options
                    <i class="glyphicon glyphicon-menu-up"></i>
                  </div>
                  <div ng-switch-default>
                    Show Advanced Options
                    <i class="glyphicon glyphicon-menu-down"></i>
                  </div>
                </div>
              </button>
            </div>
          </div>

          <div class="form-group"
                ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
                ng-repeat="configDefinition in errorStageConfigDefn.configDefinitions | filter: {displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
                ng-if="(verifyDependsOnMap(errorStageConfig, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                ng-init="configIndex = getConfigIndex(errorStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                  ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                  ng-repeat="configDefinition in service.definition.configDefinitions | filter: {displayMode: 'ADVANCED'} | orderBy: 'displayPosition'"
                  ng-if="(verifyDependsOnMap(service.config, configDefinition)) && isShownByConfigDisplayMode(configDefinition.displayMode, pipelinePaneConfig.uiInfo.displayMode)"
                  ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
        </form>

        <div class="row" ng-if="!errorStageConfigDefn">
          <div class="col-md-12" >
            <div class="alert alert-danger" role="alert">
              <i class="fa fa-exclamation-triangle"></i>
              <span translate="home.detailPane.noStageDefinitionFound" translate-values="{stageName: detailPaneConfig.stageName, library: detailPaneConfig.library}"></span>
            </div>
          </div>

          <div class="col-md-12 col-md-offset-1" >
            <button class="btn btn-primary" ng-click="onInstallMissingLibraryClick(detailPaneConfig.library)">Install Missing Stage Library</button>
          </div>

        </div>

      </div>
    </tab>

    <tab ng-if="statsAggregatorStageConfig"
         select="onTabSelect({name: 'statsAggregatorStageConfig'})"
         active="statsAggregatorStageConfigActive">
      <tab-heading class="fs-unmask" ng-controller="StatsAggregatorConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.statsAggregator' | translate}} - {{statsAggregatorStageConfigDefn.label}}
      </tab-heading>
      <div class="tabs-content" ng-if="statsAggregatorStageConfigActive" ng-controller="StatsAggregatorConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">
          <div class="form-group"
               ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
               ng-repeat="configDefinition in statsAggregatorStageConfigDefn.configDefinitions | orderBy: 'displayPosition'"
               ng-if="(verifyDependsOnMap(statsAggregatorStageConfig, configDefinition))"
               ng-init="configIndex = getConfigIndex(statsAggregatorStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition))"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
        </form>

        <div class="row" ng-if="!statsAggregatorStageConfigDefn">
          <div class="col-md-12" >
            <div class="alert alert-danger" role="alert">
              <i class="fa fa-exclamation-triangle"></i>
              <span translate="home.detailPane.noStageDefinitionFound" translate-values="{stageName: detailPaneConfig.stageName, library: detailPaneConfig.library}"></span>
            </div>
          </div>

          <div class="col-md-12 col-md-offset-1" >
            <button class="btn btn-primary" ng-click="onInstallMissingLibraryClick(detailPaneConfig.library)">Install Missing Stage Library</button>
          </div>

        </div>

      </div>
    </tab>

    <tab ng-if="startEventStageConfig"
         select="onTabSelect({name: 'startEventStageConfig'})"
         active="startEventStageConfigActive">
      <tab-heading class="fs-unmask" ng-controller="StartEventConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.startEvent' | translate}} - {{startEventStageConfigDefn.label}}
      </tab-heading>
      <div class="tabs-content" ng-if="startEventStageConfigActive" ng-controller="StartEventConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">

          <div ng-repeat="configurationGroup in startEventStageConfigDefnGroups">
            <h3 ng-if="isGroupVisible(detailPaneConfig, configurationGroup.configDefinitions, configurationGroup.group.name)">{{configurationGroup.group.label}}</h3>

            <div class="form-group"
                 ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
                 ng-repeat="configDefinition in configurationGroup.configDefinitions | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(startEventStageConfig, configDefinition))"
                 ng-init="configIndex = getConfigIndex(startEventStageConfig, configDefinition);">

              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition))"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
        </form>

        <div class="row" ng-if="!startEventStageConfigDefn">
          <div class="col-md-12" >
            <div class="alert alert-danger" role="alert">
              <i class="fa fa-exclamation-triangle"></i>
              <span translate="home.detailPane.noStageDefinitionFound" translate-values="{stageName: detailPaneConfig.stageName, library: detailPaneConfig.library}"></span>
            </div>
          </div>

          <div class="col-md-12 col-md-offset-1" >
            <button class="btn btn-primary" ng-click="onInstallMissingLibraryClick(detailPaneConfig.library)">Install Missing Stage Library</button>
          </div>

        </div>

      </div>
    </tab>

    <tab ng-if="stopEventStageConfig"
         select="onTabSelect({name: 'stopEventStageConfig'})"
         active="stopEventStageConfigActive">
      <tab-heading  class="fs-unmask" ng-controller="StopEventConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.stopEvent' | translate}} - {{stopEventStageConfigDefn.label}}
      </tab-heading>
      <div class="tabs-content" ng-if="stopEventStageConfigActive" ng-controller="StopEventConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">

          <div ng-repeat="configurationGroup in stopEventStageConfigDefnGroups">
            <h3 ng-if="isGroupVisible(detailPaneConfig, configurationGroup.configDefinitions, configurationGroup.group.name)">{{configurationGroup.group.label}}</h3>

            <div class="form-group"
                 ng-class="{'has-error': getConfigurationIssues(detailPaneConfig, configDefinition).length > 0}"
                 ng-repeat="configDefinition in configurationGroup.configDefinitions | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(stopEventStageConfig, configDefinition))"
                 ng-init="configIndex = getConfigIndex(stopEventStageConfig, configDefinition);">

              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>

          <div ng-repeat="service in detailPaneServices" ng-if="detailPaneServices">
            <div class="form-group "
                 ng-class="{'has-error': getConfigurationIssues(service.config, configDefinition).length > 0}"
                 ng-repeat="configDefinition in service.definition.configDefinitions | orderBy: 'displayPosition'"
                 ng-if="(verifyDependsOnMap(service.config, configDefinition))"
                 ng-init="configIndex = getConfigIndex(service.config, configDefinition); detailPaneConfig = service.config">
              <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                          src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
            </div>
          </div>
        </form>

        <div class="row" ng-if="!stopEventStageConfigDefn">
          <div class="col-md-12" >
            <div class="alert alert-danger" role="alert">
              <i class="fa fa-exclamation-triangle"></i>
              <span translate="home.detailPane.noStageDefinitionFound" translate-values="{stageName: detailPaneConfig.stageName, library: detailPaneConfig.library}"></span>
            </div>
          </div>

          <div class="col-md-12 col-md-offset-1" >
            <button class="btn btn-primary" ng-click="onInstallMissingLibraryClick(detailPaneConfig.library)">Install Missing Stage Library</button>
          </div>

        </div>

      </div>
    </tab>
  </tabset>
</div>

<ng-include src="'app/home/detail/configuration/typeTemplate.tpl.html'"></ng-include>
